import { 
  Color,
  Mesh, 
  MeshStandardMaterial, 
  PCFSoftShadowMap,
  AxesHelper,
  PerspectiveCamera, Vector3,
  PlaneGeometry, RectAreaLight, Scene,
  sRGBEncoding, 
  WebGLRenderer, 
  AmbientLight 
} from "three"
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'
import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'
import dat from 'dat.gui'
import Stats from 'stats.js'

RectAreaLightUniformsLib.init()

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(-50, 30, 50)

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setClearColor(0x000000)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
renderer.shadowMap.type = PCFSoftShadowMap
renderer.outputEncoding = sRGBEncoding

// 添加坐标系，方便理解
const axes = new AxesHelper(15)
scene.add(axes)

let planeGeometry = new PlaneGeometry(70, 70, 1, 1)
let planeMaterial = new MeshStandardMaterial({
  roughness: 0,
  metalness: 0,
  color: 0x808080
})
let plane = new Mesh(planeGeometry, planeMaterial)
plane.rotation.x = -0.5 * Math.PI
plane.position.set(0, 0, 0)
scene.add(plane)

const ambient = new AmbientLight(0xffffff, 0.1)
scene.add(ambient)

// 添加平面光 红
const areaLight1 = new RectAreaLight(0xff0000, 20, 4, 10)
areaLight1.position.set(-10, 10, -35)
// 使用 lookAt 调整方向
// areaLight1.lookAt(new Vector3(-10, 10, 0))
// 使用旋转调整方向
areaLight1.rotation.set(Math.PI, 0, 0)
scene.add(areaLight1)
let areaLight1Help = new RectAreaLightHelper(areaLight1)
areaLight1.add(areaLight1Help)

// 添加平面光 绿
const areaLight2 = new RectAreaLight(0x00ff00, 20, 4, 10)
areaLight2.position.set(0, 10, -35)
areaLight2.lookAt(new Vector3(0, 10, 0))
scene.add(areaLight2)
let areaLight2Help = new RectAreaLightHelper(areaLight2)
areaLight2.add(areaLight2Help)

// 添加平面光 蓝
const areaLight3 = new RectAreaLight(0x0000ff, 20, 4, 10)
areaLight3.position.set(10, 10, -35)
areaLight3.lookAt(new Vector3(10, 10, 0))
scene.add(areaLight3)
let areaLight3Help = new RectAreaLightHelper(areaLight3)
areaLight3.add(areaLight3Help)

// 控制器
let controls = new function() {
  this.color1 = 0xff0000
  this.intensity1 = 20
  this.color2 = 0x00ff00
  this.intensity2 = 20
  this.color3 = 0x0000ff
  this.intensity3 = 20
}

let gui = new dat.GUI()
gui.addColor(controls, 'color1').onChange(e => {
  areaLight1.color = new Color(e)
})
gui.add(controls, 'intensity1', 0, 100).onChange(e => {
  areaLight1.intensity = e
})
gui.addColor(controls, 'color2').onChange(e => {
  areaLight2.color = new Color(e)
})
gui.add(controls, 'intensity2', 0, 100).onChange(e => {
  areaLight2.intensity = e
})
gui.addColor(controls, 'color3').onChange(e => {
  areaLight3.color = new Color(e)
})
gui.add(controls, 'intensity3', 0, 100).onChange(e => {
  areaLight3.intensity = e
})

document.body.appendChild(renderer.domElement)

const trackballControls = new TrackballControls(camera, renderer.domElement)
const stats: Stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

function render() {
  stats.update()
  areaLight1Help.update()
  trackballControls.update()

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()